<template>
  <div class="edit-container">
    <el-card class="edit-card">
      <div slot="header" class="clearfix">
        <span>编辑</span>
      </div>
      <div class="edit-main">
        <el-form
          :model="form"
          ref="ruleForm"
          :rules="rules"
          label-width="120px"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="作品名称" prop="opusName">
                <el-input
                  v-model="form.opusName"
                  placeholder="请输入作品名称"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="作品编号" prop="opusNum">
                <el-input
                  v-model="form.opusNum"
                  placeholder="请输入作品编号"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="作品类别" prop="opusCategoryId">
                <el-select
                  v-model="form.opusCategoryId"
                  placeholder="请选择作品类别"
                >
                  <el-option
                    v-for="item in opusCategories"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="公司" prop="company">
                <el-input
                  v-model="form.company"
                  placeholder="请输入公司"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="版权所有人" prop="copyrightOwner">
                <el-input
                  v-model="form.copyrightOwner"
                  placeholder="请输入版权所有人"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="版权号" prop="copyrightNum">
                <el-input
                  v-model="form.copyrightNum"
                  placeholder="请输入版权号"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="作者" prop="author">
                <el-input
                  v-model="form.author"
                  placeholder="请输入作者"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="创作完成日期" prop="creationDoneDate">
                <el-date-picker
                  v-model="form.creationDoneDate"
                  type="date"
                  placeholder="选择创作完成日期"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="登记日期" prop="registerDate">
                <el-date-picker
                  v-model="form.registerDate"
                  type="date"
                  placeholder="选择登记日期"
                ></el-date-picker>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="获取方式" prop="getMethod">
                <el-select
                  v-model="form.getMethod"
                  placeholder="请选择获取方式"
                >
                  <el-option
                    v-for="method in getMethods"
                    :key="method.id"
                    :label="method.name"
                    :value="method.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="使用年限" prop="useLimit">
                <el-input
                  v-model="form.useLimit"
                  placeholder="请输入使用年限"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="版权期限" prop="copyrightTerm">
                <el-input-number
                  v-model="form.copyrightTerm"
                  :min="0"
                  placeholder="请输入版权期限"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="备注" prop="remark">
                <el-input
                  type="textarea"
                  v-model="form.remark"
                  placeholder="请输入备注内容"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="创建人" prop="creatorId">
                <el-select
                  v-model="form.creatorId"
                  placeholder="请选择创建人"
                >
                  <el-option
                    v-for="item in users"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >提交</el-button
            >
            <el-button @click="resetForm('ruleForm')">重置</el-button>
            <el-button type="warning" @click="goBack()">返回</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import { copyright } from "@/api/copyright";
import { opusCategory } from "@/api/opusCategory";
import userService from "@/api/user";

export default {
  data() {
    return {
      form: {
        opusName: "",
        opusNum: "",
        opusCategoryId: "",
        company: "",
        copyrightOwner: "",
        copyrightNum: "",
        author: "",
        creationDoneDate: "",
        registerDate: "",
        getMethod: "",
        useLimit: "",
        copyrightTerm: "",
        remark: "",
        creatorId: "",
      },
      rules: {
        opusName: [
          { required: true, message: "作品名称必填", trigger: "blur" },
        ],
        opusNum: [{ required: true, message: "作品编号必填", trigger: "blur" }],
        opusCategoryId: [
          { required: true, message: "作品类别必填", trigger: "change" },
        ],
        company: [{ required: true, message: "公司必填", trigger: "blur" }],
        copyrightOwner: [
          { required: true, message: "版权所有人必填", trigger: "blur" },
        ],
        copyrightNum: [
          { required: true, message: "版权号必填", trigger: "blur" },
        ],
        author: [{ required: true, message: "作者必填", trigger: "blur" }],
        creationDoneDate: [
          { required: true, message: "创作完成日期必填", trigger: "change" },
        ],
        registerDate: [
          { required: true, message: "登记日期必填", trigger: "change" },
        ],
        getMethod: [
          { required: true, message: "获取方式必填", trigger: "change" },
        ],
        useLimit: [
          { required: true, message: "使用年限必填", trigger: "blur" },
        ],
        copyrightTerm: [
          { required: true, message: "版权期限必填", trigger: "blur" },
          { type: "number", message: "版权期限必须是数字", trigger: "blur" },
        ],
        remark: [{ required: false }], // 备注可以不填
      },
      opusCategories: [], // 作品类别选项，需从API获取
      users: [], // 用户选项，需从API获取
      getMethods: [
        { id: 1, name: "方法一" },
        { id: 2, name: "方法二" },
      ], // 获取方式的示例选项
      size: "medium",
    };
  },
  created() {
    this.getOpusCategories();
    this.getUsers();
  },
  methods: {
    getOpusCategories() {
      opusCategory.findAll().then((res) => {
        this.opusCategories = res.data;
      });
    },
    getUsers() {
      userService.findAll().then((res) => {
        this.users = res.data;
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // console.log("submit!");
          // 提交逻辑，例如发送到后端
          copyright
            .add(this.form)
            .then((res) => {
              this.$message({
                message: res.msg,
                type: "success",
              });
              this.$router.push({
                name: "Copyright",
              });
            })
            .catch(() => {
              this.$message({
                message: res.msg,
                type: "danger",
              });
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    goBack() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
.clearfix {
  text-align: center;
}

.input-style {
  width: 100%; /* 输入框宽度一致 */
}

/* 使每个表单项的标签及内容居中 */
.el-form-item__content {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
